import {useSelector,useDispatch} from 'react-redux'
import {useEffect,useState} from 'react'
import {RootState} from "../../redux/store/store";
import {getPayment} from "../../redux/Payment/slice";
import {Button,Divider,Col,Row,Spin} from 'antd'
import {CheckCircleOutlined,SafetyOutlined} from '@ant-design/icons'
import {PaymentForm} from "../../components/PaymentForm/PaymentForm";
import {useHistory} from 'react-router-dom'
import './pagepayment.css'
function PagePayment(){
    const orderid=useSelector((state:RootState)=>state.buycar.orderid);
    const token=useSelector((state:RootState)=>state.userlogin.token);
    const dispatch=useDispatch();
    const orderlist=useSelector((state:RootState)=>state.payment.orderlist);
    const isloading=useSelector((state:RootState)=>state.payment.isloading);
    const [status,setstatus]=useState(false);
    const history=useHistory();
    useEffect(()=>{
        if(orderid){
            dispatch(getPayment({token:token as string,orderid:orderid as string|number}));
        }
    },[])
    const goback=()=>{
        history.push('/home');
    }
    const finishpay=()=>{
        setstatus(true);
    }
    return (
        isloading ?
            <Spin style={{width:"100%",height:"100vh"}}></Spin> :
        <div className="pagepayment">
            <Row>
                <Col span={10}>
                    <PaymentForm></PaymentForm>
                </Col>
                <Col span={14}>
                    <div className="payright">
                        <h1 className="paysum">总计</h1>
                        {
                            orderlist.map((item)=>{
                                return (
                                    <div className="payitem" key={item.id}>
                                        <span>{item.touristRoute.title}</span>
                                        <span className="paybefore">￥ {item.touristRoute.originalPrice}</span>
                                        <span className="paynow">￥ {item.touristRoute.price}</span>
                                    </div>
                                )
                            })
                        }
                        <Divider></Divider>
                        {
                            status ?
                            <Button type="primary" onClick={goback}>
                                <SafetyOutlined />回到首页
                            </Button> :
                            <Button type="primary" danger onClick={finishpay}>
                                <CheckCircleOutlined />下单支付
                            </Button>
                        }
                    </div>
                </Col>
            </Row>
        </div>
    )
}
export default PagePayment